<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-26 09:44:28
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:34:28
 * @FilePath: /banban/pages/login/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="login-page" :style="`padding-top: ${statusBarHeight}px`">
        <view class="welcome-title">欢迎</view>

        <view class="nfc-container">
            <view class="use-nfc-title">使用NFC登录</view>
            <view class="use-nfc-img"></view>
            <view class="use-nfc-tip">靠近手机即可完成登录</view>
        </view>

        <view class="fix-bottom">
            <view class="other-line-container">
                <view class="l-line"></view>
                <text class="other-line-title">OR</text>
                <view class="r-line"></view>
            </view>

            <view class="login-way-container">
                <view class="login-way-item" @tap="phoneLogin"> <view class="dx-icon"></view> <text class="text">短信登录</text></view>
                <!-- <view class="login-way-item"> <view class="wx-icon"></view> <text class="text">微信登录</text></view> -->
            </view>

            <view class="protocol-container">
                <checkbox-group class="protocol-checkbox-group" @change="protocolChange" >
                    <label><checkbox style="transform: scale(.8);" value="1" color="#0098ff"/>我已阅读并同意<text class="special-text" @tap.stop="nav('/pages/about/userAgreement')">用户协议</text>和<text class="special-text" @tap.stop="nav('/pages/about/privacyAgreement')">隐私政策</text></label>
                </checkbox-group>
            </view>
        </view>
    </view>
</template>
<script setup name="Login">
import { onLoad } from '@dcloudio/uni-app'
import nfc from '@/utils/nfc'
import { toast } from '@/utils/common'
import { ref, computed } from 'vue'
import store from '@/store/index.js';
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)

const nfcIds = ref([])

// NFC读取信息
const readData = async () => {
    
    const nfcId = await nfc.listenNFCStatus();

    if (!protocolChecked.value) {
        toast({
            title: '请阅读并同意用户协议和隐私协议',
            icon: 'none'
        })
        nfcIds.value = []
        readData()
        return
    }
    nfcIds.value = [...nfcIds.value, nfcId]
    // 本地存储
    uni.setStorageSync('nfcId', nfcId)

    verifyNFCInfo()
}

// NFC登录
const verifyNFCInfo = () => {

    const [nfcId] = nfcIds.value
    // 判定当前NFC是否已经绑定过用户和手机号
    const noBind = 1

    toast({ title: '识别成功：' + nfcIds.value[0], icon: 'none'}, () => {
        if (noBind) {
            // 没有绑定过 => 使用短信登录并注册、并绑定NFC
            uni.navigateTo({
                url: '/pages/login/phone?nfcId=' + nfcId,
            });
        } else {
            uni.navigateTo({
                url: '/pages/home/index?nfcId=' + nfcId,
            });
        }
    })

}

// 手机登录
const phoneLogin = () => {
    if (!protocolChecked.value) {
        toast({
            title: '请阅读并同意用户协议和隐私协议',
            icon: 'none'
        })
        return
    }
    uni.navigateTo({
        url: '/pages/login/phone?type=login',
    });
}

// 协议勾选
const protocolChecked = ref(undefined)
const protocolChange = (e) => {
    protocolChecked.value = e.detail.value[0]
    console.log(protocolChecked.value, 'protocolChecked.value')
}

const nav = (url) => {
    uni.navigateTo({
        url
    });
}

onLoad(() => {
    readData()
})
</script>
<style lang="scss">
	.login-page {
        box-sizing: border-box;
        background: linear-gradient(-135deg, #FAEEE7 0, #F3ACB7 100%);
        background: url('@/static/image/login/login-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-family: HarmonyOS Sans SC;
        height: 100vh;
        /* overflow: auto; */

        .welcome-title {
            margin-top: 60rpx;
            text-align: center;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 70rpx;
            font-weight: 500;
            letter-spacing: 0;
            color: rgba(0, 0, 0, 1);
            text-align: center;
            vertical-align: top;
            
        }

        .nfc-container {
            margin: 80rpx auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .use-nfc-title {
                height: 40rpx;
                line-height: 40rpx;
                font-size: 40rpx;
                font-weight: 400;
                letter-spacing: 1px;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                vertical-align: top;
            }

            .use-nfc-tip {
                height: auto;
                font-size: 28rpx;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 42rpx;
                color: rgba(166, 166, 166, 1);
                text-align: center;
                vertical-align: top;
                margin-top: 10rpx;
            }

            .use-nfc-img {
                margin-top: 40rpx;
                margin-bottom: 28rpx;
                width: 200rpx;
                height: 200rpx;
                background: url('@/static/image/login/nfc.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }

        .other-line-container {
            margin: 0 auto 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .other-line-title {
                margin: 0 24rpx;
                font-size: 28rpx;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 28rpx;
                color: rgba(128, 128, 128, 1);
                text-align: center;
                vertical-align: top;
            }


            .l-line,
            .r-line {
                width: 40vw;
                height: 1px;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 1px;
            }

        }

        .login-way-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 40rpx;


            .login-way-item {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 30rpx;
                width: calc(100vw - 96rpx);
                height: 110rpx;
                line-height: 110rpx;
                box-sizing: border-box;
                border-radius: 20rpx;
                background: rgba(255, 255, 255, 1);
                
                .text {
                    font-size: 36rpx;
                    font-weight: 400;
                    letter-spacing: 0px;
                    color: rgba(0, 0, 0, 1);
                    vertical-align: top;
                }
            }


            .wx-icon {
                position: absolute;
                left: 0;
                width: 110rpx;
                height: 110rpx;
                background:url('@/static/image/login/wx.png') no-repeat;
                background-position: center center;
                background-size: 44rpx 44rpx;
            }

            .dx-icon {
                position: absolute;
                left: 30rpx;
                width: 110rpx;
                height: 110rpx;
                background:url('@/static/image/login/dx.png') no-repeat;
                background-size: 100% 100%;

            }
        }


        .protocol-container {
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 36rpx;
            color: rgba(167, 167, 167, 1);
            
            .special-text {
                text-decoration-line: underline;
                color: #0098ff;
            }

            .protocol-checkbox-group {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
		

        .fix-bottom {
            position: fixed;
            width: 100%;
            bottom: 40rpx;
        }
	}
</style>